<template>
  <div class="shoplistItem">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
       v-for="nav in navs"
       :key="nav.id"
       :to="'/shoplist/category/' + nav.id"
       :title="nav.name"
      />
    </van-sidebar>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sidebar, SidebarItem } from 'vant'
import { getNavs } from '@/api/home.js'

Vue.use(Sidebar)
Vue.use(SidebarItem)

export default {
  name: 'shoplistItem',
  data () {
    return {
      activeKey: 0,
      navs: ''
    }
  },
  async created () {
    const res = await getNavs()
    res.list = res.list.slice(1)
    this.navs = res.list
    this.$router.push({
      name: 'category',
      params: {
        id: this.navs[0].id
      }
    }).catch(() => {})
    // const id = this.navs[0].id
    // this.$router.push(`shoplist/category/${id}`).catch(() => {})
  }
}
</script>

<style lang="scss" scoped>
   .shoplistItem {
     display: flex;
     height: 100%;
    .van-sidebar {
      overflow-x: hidden;
    }
    .right {
      flex: 1;
      overflow: auto;
    }
   }
</style>
